<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<html lang="en">
<head>
<title>Portable Query Generator</title>
<link href="http://npr-simile-timeline.googlecode.com/svn/trunk/timeline.css" rel="stylesheet" type="text/css" />
<!-- begin css / js for scal -->
<link href="http://npr-simile-timeline.googlecode.com/svn/trunk/scal.css" rel="stylesheet" type="text/css" />

<!-- load common javascript libraries from google -->
<!-- thanks to http://groups.google.com/group/Google-AJAX-Search-API/browse_thread/thread/fd887a8439bf635a -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("prototype", "1.6.0.2");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects,dragdrop"></script> 

<script type="text/javascript" src="http://npr-simile-timeline.googlecode.com/svn/trunk/scal.js"></script>
<!-- end css / js for scal -->

<!-- begin js to build selction lists and query string/url -->
<!-- end additional javascript for scal -->
<script src="http://npr-simile-timeline.googlecode.com/svn/trunk/qglite.js" type="text/javascript"></script>

<!-- for testing: commented out for production use
<script src="http://www.thomasfrank.se/downloadableJS/jsonStringify.js" type="text/javascript"></script>  -->

</head>

<body>

<FORM name="selectionForm" target="timelineFrame">
<div style="float:left;">
<fieldset>
            <legend>Search Term</legend>
<input type="text" name="searchTerm" id="searchTerm" onchange="createQueryString();">
</fieldset>
</div>
<div id="numberOfResults" style=" float:left; width:221px;">
<fieldset>
            <legend>Number of Results</legend>
            <label for="startNum">Start Number:
                <input id="startNum" type="text" size="3" onchange="createQueryString();">
            </label><br>
            <label for="numResults">Number of Results:
			<select id="numResults" name="numResults" onblur="createQueryString();">
                  <option value="">default</option>
                  <option value="5">5</option>
                  <option value="10">10</option>
                  <option value="15">15</option>
                  <option value="20">20</option>
                </select>

            </label>
        </fieldset>
</div>
<div id="calendar-container" style="float:left; position: absolute; top: 10px; left: 385px; width:221px; position:absolute; display:none;">
	    <b class="rtop">
            <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
        </b>
        <div class="floating" id="calendar"></div>
</div>
<fieldset style="width:350px;">
            <legend>Date Range</legend>
    <label for="pDate">Specific Date:
    <input type="text" value="" id="pDate" onchange="createQueryString();"/>
    <img src="calendar.jpg" id="imgDate" />
    </label>
    <br />
    <label for="pSDate">Start Date:
    <input type="text" value="" id="pSDate" onchange="createQueryString();"/>
    <img src="calendar.jpg" id="imgSDate" />
    </label>
    <br />
    <label for="pEDate">End Date:
    <input type="text" value="" id="pEDate" onchange="createQueryString();"/>
    <img src="calendar.jpg" id="imgEDate" />
    </label>
</fieldset>


<br clear="all">
<div style="float:left">
<fieldset>
            <legend>Topics</legend>
<SELECT NAME="topicsList" multiple size="4" onblur="getSelectedTopics(document.selectionForm.topicsList);">
<Option value=""></option>
</SELECT> 
<input type="hidden" id="selectedTopics">
</fieldset>
</div>

<div style="float:left">
<fieldset>
            <legend>Programs</legend>

<SELECT NAME="programsList" multiple size="4" onblur="getSelectedPrograms(document.selectionForm.programsList);">
<Option value=""></option>
</SELECT>
<input type="hidden" id="selectedPrograms">
</fieldset>
</div>

<div style="float:left">
<fieldset>
            <legend>Series</legend>
<SELECT NAME="seriesList" multiple size="4" onblur="getSelectedSeries(document.selectionForm.seriesList);">
<Option value=""></option>
</SELECT>
<input type="hidden" id="selectedSeries">
</fieldset>
</div>
<!--  -->
<div style="float:left">
<fieldset>
            <legend>Columns</legend>
<SELECT NAME="columnsList" multiple size="4" onblur="getSelectedColumns(document.selectionForm.columnsList);">
<Option value=""></option>
</SELECT>

</fieldset>
</div>
<input type="hidden" id="selectedColumns">

<input type="hidden" id="queryBox" name="queryBox">
<input type="hidden" id="newURL" name="newURL">

</form>


<!-- Topics: -->
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=2cf390d2699b3a5b6db04d245c412143&_render=json&_callback=getTopicsList" type="text/javascript"></script>
 
<!-- Programs: -->
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=1bfd5bad898149176d829f4bd3a522b5&_render=json&_callback=getProgramsList" type="text/javascript"></script>

<!-- Series: -->
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=20cb092ac0b2683a2097dc1dc378ae51&_render=json&_callback=getSeriesList" type="text/javascript"></script>

<!-- Columns: -->
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=c35059519ddbd54d6e38c864b0f8fffb&_render=json&_callback=getColumnsList" type="text/javascript"></script>


<!-- Bios:
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=e62f5b60fdba7db1ca3d6f37e8f6b565&_render=json&_callback=getBiosList" type="text/javascript"></script> -->

<!-- Music Genres:
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=60b51fe750f31ba1f92f7b9105b49818&_render=json&_callback=getMusicList" type="text/javascript"></script> -->

<!-- Music Artists: 
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=476d2ea2826d41dd8dafea61f6a1949a&_render=json&_callback=getArtistsList" type="text/javascript"></script> -->




</body>
</html>
